<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>设备历史记录图表查询</title>
    <meta name="decorator" content="nblank"/>
    <link href="${ctxStatic}/modules/biz/record/equItemHisList.css" rel="stylesheet" itself="true" />
    <%@include file="/WEB-INF/views/include/treetable.jsp" %>
</head>
<body>
<%--<sys:message content="${message}"/>--%>
<div class="content container">
    <h2 class="page-title">设备历史记录图表查询
        <small> 设备记录列表</small>
    </h2>
    <div class="row">
        <div class="col-md-12">
            <section class="widget widget-tabs">
                <header>
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="javascript:;">${officebiz.name}设备记录列表</a></li>
                    </ul>
                </header>
                <%--<sys:message content="${message}"/>--%>
                <div class="body tab-content">
                    <div class="tab-pane active clearfix">
                        <form:form id="inputForm" modelAttribute="equipmentItemRecordSuper" method="post"
                                   class="form-inline widget">
                            <form:hidden path="etypeKid"/>
                            <input type="hidden" id="inputOfficeId" value="${officebiz.id}">
                            <%--<form:input path="etypeKid" htmlEscape="false" maxlength="50" readonly="true" size="16" class="form-control input-transparent"/>--%>
                            <div class="row">
                                <div class="col-md-6  git-first">
                                    <div class="form-group pull-left">
                                        <label class=" mg-right-12 ps-r-6"><span style="color: red;">*</span>站点选择:&nbsp;</label>
                                    </div>
                                    <sys:treeselectExtend id="office" name="office.id" value="${user.office.id}"
                                                    labelName="office.name" labelValue="${user.office.name}"
                                                    title="站点" url="/sys/office/treeDataThree?type=2"
                                                    cssClass="form-control input-transparent" notAllowSelectRoot="true"
                                                    notAllowSelectParent="false" officeGrade="true"/>
                                </div>
                                <div class="col-md-6 ">
                                    <div class="form-group">
                                        <label class="mg-bottom"><span style="color: red;">*</span>组查询:</label>
                                    </div>
                                    <div class="form-group">
                                        <form:select path="sgroupId" class="selectpicker" data-style="btn-primary">
                                            <form:option value="" label="请选择"/>
                                        </form:select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="mg-bottom"><span style="color: red;">*</span>设备查询:&nbsp;</label>
                                    </div>
                                    <div class="form-group">
                                        <form:select path="gitemId" class="selectpicker" data-style="btn-primary"
                                                     style="width: 70%;">
                                            <form:option value="" label="请选择"/>
                                            <%--<form:options items="${itemlist}" itemValue="id" itemLabel="name" htmlEscape="false"/>--%>
                                        </form:select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="mg-bottom"><span style="color: red;">*</span>属 性:&nbsp;</label>
                                    </div>
                                    <div class="form-group">
                                        <form:select path="recordColumn" class="selectpicker width-70" data-style="btn-primary">
                                            <form:option value="" label="请选择"/>
                                        </form:select>
                                    </div>
                                </div>
                            </div>
                            <div class="row form-inline pd-15-14">
                                <div class="form-group">
                                    <label class="mg-bottom">&nbsp;&nbsp;&nbsp;&nbsp;起始时间:</label>
                                </div>
                                <div class="input-group date col-sm-3 timeb1" data-link-field="stime1">
                                    <form:input path="timeBegin" htmlEscape="false" maxlength="50" readonly="true" size="32" class="form-control input-transparent time-min-width"/>
                                    <%--<div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>--%>
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                                </div>
                                <div class="form-group">
                                    <label class="mg-bottom">&nbsp;&nbsp;&nbsp;&nbsp;截止时间:</label>
                                </div>
                                <div class="input-group date col-sm-3 timee1" data-link-field="etime1" data-parsley-priority-enabled="false">
                                    <form:input path="timeEnd" htmlEscape="false" maxlength="50" readonly="true" size="32" class="form-control input-transparent time-min-width"/>
                                    <%--<div class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></div>--%>
                                    <div class="input-group-addon"><span class="glyphicon glyphicon-time"></span></div>
                                </div>
                                <div class="input-group col-md-1">
                                    <input id="btnSubmit" class="btn btn-primary" type="button" value="查询"/>
                                </div>
                            </div>
                        </form:form>
                        <div class="widget mg-bottom-0">
			                <div id="nullTip" style="text-align: center;">结果为空</div>
                            <div id="main" style="height:520px;"></div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
<script src="${ctxStatic}/echarts/echarts.js"></script>
<script src="${ctxStatic}/echarts/theme/dark.js"></script>

<script type="text/javascript">
    var $btnSubmit = $("#btnSubmit");
    var $sgroupId = $("#sgroupId");
    var $gitemId = $("#gitemId");
    var $office = $('#officeId');
    var $timeBegin = $("#timeBegin");
    var $timeEnd = $("#timeEnd");
    var $etypeKid = $('#etypeKid');
    var $recordColumn = $('#recordColumn');//属性

    $(function () {
        var myChart = "";
        var graphTitle = '';//图标题
        var subTitleOne = "";//图二级标题
        var subTitleTwo = "";//图二级标题
        var unit = '';//单位
        var column = "";
        var columnOne = "";
        var columnTwo = "";
        var columnThree = "";
        var columnFour = "";
        var nullTipDiv=$("#nullTip");
        nullTipDiv.css("display","none");
        //初始化时间
        $timeBegin.val(showTime(-10,0));//默认开始时间
        $timeEnd.val(showTime(0,0));//默认截止时间
        //设置下拉单，按钮不可用
        $btnSubmit.attr("disabled", true);
        $sgroupId.attr("disabled", true);
        $gitemId.attr("disabled", true);
        $recordColumn.attr("disabled", true);
        //下拉框除第一栏的全部清除
        $sgroupId.find("option:not(:first)").remove();
        $gitemId.find("option:not(:first)").remove();
        $recordColumn.find("option:not(:first)").remove();
        //刷新
        $sgroupId.change().selectpicker('refresh');
        $gitemId.change().selectpicker('refresh');
        $recordColumn.change().selectpicker('refresh');

//        组select的change事件
        $sgroupId.on('changed.bs.select', function () {
            $btnSubmit.attr("disabled", true);
            $gitemId.attr("disabled", true);
            $recordColumn.attr("disabled", true);

            $gitemId.find("option:not(:first)").remove();
            $recordColumn.find("option:not(:first)").remove();

            if ($sgroupId.val() == "") {
                $gitemId.change().selectpicker('refresh');
                $recordColumn.change().selectpicker('refresh');
            } else {
                $.ajax({
                    type: "get",
                    url: "${ctx}/biz/sgcfg/graphItemlist",
                    data: {
                        sgroupId: $sgroupId.val()
                    },
                    dataType: "json",
                    success: function (data) {
                        $.each(data, function (indexColumn, item) {
                            $("<option value='" + item.gitem.id + "'>" + item.gitem.name + "</option>").appendTo("#gitemId");
                        });
                        $gitemId.attr("disabled", false);
                        $gitemId.change().selectpicker('refresh');
                        $recordColumn.change().selectpicker('refresh');
                    }
                });
            }
        });

//        设备select的change事件
        $gitemId.on('changed.bs.select', function () {
            $btnSubmit.attr("disabled", true);
            $recordColumn.attr("disabled", true);
            $recordColumn.find("option:not(:first)").remove();
            if ($gitemId.val() == "") {
                $("#recordColumn").change().selectpicker('refresh');
            } else {
                $.ajax({
                    type: "get",
                    url: "${ctx}/biz/ehRecord/etypeKid",
                    data: {
                        itemId: $gitemId.val()
                    },
                    dataType: "json",
                    success: function (data) {
                        $etypeKid.val(data);//由该值确定查询调用具体方法--usp,transmitter...
                        graphTitle = $gitemId.find("option:selected").text();//highchart的标题--设备名称
                        if ($('#etypeKid').val() == "ToshibaBJFourPowerTransDev"||$('#etypeKid').val() == "ToshibaBJThreePowerTransDev") {
                            columnOne = "发射功率";
                            columnTwo= "反射功率";
                            $("<option value='0'>" + columnOne + "</option>").appendTo("#recordColumn");
                            $("<option value='1'>" + columnTwo + "</option>").appendTo("#recordColumn");
                        } else if ($('#etypeKid').val() == "KFDCMMBTransDev" ) {
                            columnOne = "发射功率";
                            columnTwo= "反射功率";
                            columnThree = "激励器A_射频频率";
                            columnFour = "激励器B_射频频率";
                            $("<option value='0'>" + columnOne + "</option>").appendTo("#recordColumn");
                            $("<option value='1'>" + columnTwo + "</option>").appendTo("#recordColumn");
                            $("<option value='2'>" + columnThree + "</option>").appendTo("#recordColumn");
                            $("<option value='3'>" + columnFour + "</option>").appendTo("#recordColumn");
//                        } else if ($('#etypeKid').val() == "HumTemDev") {
//                            columnOne = "温度";
//                            columnTwo = "湿度";
//                            $("<option value='0'>" + columnOne + "</option>").appendTo("#recordColumn");
//                            $("<option value='1'>" + columnTwo + "</option>").appendTo("#recordColumn");
                        }  else if ($('#etypeKid').val() == "KFDCMMBExciterDev"|| $('#etypeKid').val() == "ToshibaBJExciterDev") {
                            columnOne = "射频频率";
                            $("<option value='0'>" + columnOne + "</option>").appendTo("#recordColumn");
                        }
                        $recordColumn.attr("disabled", false);
                        $("#recordColumn").change().selectpicker('refresh');
                    }
                });
            }
        });
//        字段select的change事件
        $('#recordColumn').on('changed.bs.select', function () {
            $btnSubmit.attr("disabled", true);
            if ($('#recordColumn').val() == "") {
                $btnSubmit.attr("disabled", true);
            } else {
                $btnSubmit.attr("disabled", false);
                column = $('#recordColumn option:selected').text(); //获取当前选中文本
            }
        });

//        表单提交事件
        $btnSubmit.click(function () {
            var ac=new Date($timeBegin.val().replace("-", "/").replace("-", "/"));
            var bc=new Date($timeEnd.val().replace("-", "/").replace("-", "/"));
            if(ac>=bc){
                Messenger().post("起始时间必须小于截止时间");
            }else{
                $btnSubmit.attr("disabled", true).attr("value", "查询中...");
                $.ajax({
                    type: "get",
                    url: "${ctx}/biz/ehRecord/" + $etypeKid.val() + "Graph",
                    data: {
                        officeId: $('#officeId').val(),
                        sgroupId: $sgroupId.val(),
                        gitemId: $gitemId.val(),
                        timeBegin: $timeBegin.val(),
                        timeEnd: $timeEnd.val()
                    },
                    dataType: "json",
                    success: function (data) {
                        var i = 0;
                        var contentArray1 = [];
                        var contentArray2 = [];
                        var contentArray3 = [];
                        var contentArray4 = [];
                        var dateArray = [];
                        $.each(data, function (indexColumn, item) {
                            graphTitle = item.gitemName;
                            if (item.etypeKid == "KFDCMMBTransDev" || item.etypeKid == "ToshibaBJThreePowerTransDev" || item.etypeKid == "ToshibaBJFourPowerTransDev") {//发射机
                                if ($('#recordColumn').val() == "0" || $('#recordColumn').val() == "1") {
                                    unit = '[W]';
                                    contentArray1.push(item.transmitPower);
                                    contentArray2.push(item.reflectPower);
                                }else if($('#recordColumn').val() == "2" || $('#recordColumn').val() == "3"){
                                    unit = '[MHz]';
                                    contentArray3.push(item.rfRateA);
                                    contentArray4.push(item.rfRateB);
                                }
                            }else if(item.etypeKid == "KFDCMMBExciterDev") {
                                unit = '[MHz]';
                            }
                            subTitleOne = column;
                            return false;
                        });
                        $.each(data, function (indexColumn, item) {
                            graphTitle = item.gitemName;
                            if (item.etypeKid == "KFDCMMBTransDev" || item.etypeKid == "ToshibaBJThreePowerTransDev" || item.etypeKid == "ToshibaBJFourPowerTransDev") {//发射机
                                if ($('#recordColumn').val() == "0" || $('#recordColumn').val() == "1") {
                                    contentArray1.push(item.transmitPower);
                                    contentArray2.push(item.reflectPower);
                                }else if($('#recordColumn').val() == "2" || $('#recordColumn').val() == "3"){
                                    contentArray3.push(item.rfRateA);
                                    contentArray4.push(item.rfRateB);
                                }
                            }else if(item.etypeKid == "KFDCMMBExciterDev "|| item.etypeKid == "ToshibaBJExciterDev ") {
                                contentArray1.push(item.rfRate);
                            }
                            dateArray.push(timeString(item.timeStamp,1));
                            i++;
                        });
//                        $.each(data, function (indexColumn, item) {
//                            if (item.etypeKid == "KFDCMMBTransDev" || item.etypeKid == "ToshibaBJThreePowerTransDev" || item.etypeKid == "ToshibaBJFourPowerTransDev") {//发射机
//                                contentArray1.push(item.transmitPower);
//                                contentArray2.push(item.reflectPower);
//                            }else if(item.etypeKid == "KFDCMMBExciterDev "|| item.etypeKid == "ToshibaBJExciterDev ") {
//                                contentArray1.push(item.rfRate);
//                            }
//                            dateArray.push(timeString(item.timeStamp,1));
//                            i++;
//                        });
                        switch($('#recordColumn').val()){
                            case "0":
                                chartInit(graphTitle,subTitleOne,contentArray1,dateArray);
                                break;
                            case "1":
                                chartInit(graphTitle,subTitleOne,contentArray2,dateArray);
                                break;
                            case "2":
                                chartInit(graphTitle,subTitleOne,contentArray3,dateArray);
                                break;
                            case "3":
                                chartInit(graphTitle,subTitleOne,contentArray4,dateArray);
                                break;
                            default:
                                console.info("ERROR");
                                break;
                        }
                        // 使用刚指定的配置项和数据显示图表。
                        if(dateArray.length==0){
                            myChart=="";
                            nullTipDiv.css("display","block");
                        }else {
                            myChart.setOption(option);
                            nullTipDiv.css("display","none");
                        }
                        $btnSubmit.attr("disabled", false).attr("value", "查询");
                    }
                });
            }
        });

        function chartInit(graphTitle,subTitleOne,contentArray1,dateArray){
            // 基于准备好的dom，初始化echarts实例
            myChart = echarts.init(document.getElementById('main'),'dark');

            // 指定图表的配置项和数据
            option = {
                title : {
                    text : graphTitle,
                    subtext : subTitleOne+" "+unit,
                    left:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    formatter : function (params) {
                        var result='';
                        if(params){
                            result += params[0].data[0]+"<br/>";
                            for(var i=0;i<params.length;i++){
                                if(i!=0){
                                    result+="<br/>"
                                }
                                result+=params[i].seriesName+", "+params[i].data[1]+" "+unit;
                            }
                        }
                        return result;
                    }
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        magicType: {type: ['line', 'bar']}
//                                    dataView : {show: true, readOnly: false}
                    }
                },
                dataZoom: {
                    show: true,
                    start : 70,
                    dataBackgroundColor:'#eee'
                },
                legend : {
                    data:[subTitleOne],
                    x:'left',
                    orient:'horizontal'
                },
                grid: {
                    x:60,
                    x2:40,
                    y2:80
                },
                xAxis : [
                    {
                        data:dateArray
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name: subTitleOne,
                        type: 'line',
                        showAllSymbol: false,
//                      symbolSize:0,
                        data: (function () {
                            var d = [];
                            var len = 0;
                            while (len < dateArray.length) {
                                d.push([
                                    dateArray[len],
                                    contentArray1[len],
                                    (Math.random()*100).toFixed(2) - 0
                                ]);
                                len++;
                            }
                            return d;
                        })()
                    }
                ]
            };
        }
        PjaxApp.onResize(function(){
            if(myChart != ""){
                myChart.resize();
            }
        });
    });

    /** 站点控件选择功能 **/
    function stationSelect(officeIdVar) {
        $btnSubmit.attr("disabled", true);
        $sgroupId.attr("disabled", true);
        $gitemId.attr("disabled", true);
        $recordColumn.attr("disabled", true);

        $sgroupId.find("option:not(:first)").remove();
        $gitemId.find("option:not(:first)").remove();
        $recordColumn.find("option:not(:first)").remove();

        if (officeIdVar == "") {
            $sgroupId.change().selectpicker('refresh');
            $gitemId.change().selectpicker('refresh');
            $recordColumn.change().selectpicker('refresh');
        } else {
            $.ajax({
                type: "post",
                url: "${ctx}/biz/ehRecord/sgroupSelect?officeId=" + officeIdVar,
                dataType: "json",
                success: function (data) {
                    $.each(data, function (indexColumn, item) {
                        $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo("#sgroupId");
                    });
                    $sgroupId.attr("disabled", false);
                    $sgroupId.change().selectpicker('refresh');
                    $gitemId.change().selectpicker('refresh');
                    $recordColumn.change().selectpicker('refresh');
                }
            });
        }
    }

    <%--//单站点时启用--%>
    <%--function initSgroup(){--%>
        <%--$btnSubmit.attr("disabled", true);--%>
        <%--$sgroupId.attr("disabled", true);--%>
        <%--$gitemId.attr("disabled", true);--%>
        <%--$recordColumn.attr("disabled", true);--%>

        <%--$sgroupId.find("option:not(:first)").remove();--%>
        <%--$gitemId.find("option:not(:first)").remove();--%>
        <%--$recordColumn.find("option:not(:first)").remove();--%>

        <%--$sgroupId.change().selectpicker('refresh');--%>
        <%--$gitemId.change().selectpicker('refresh');--%>
        <%--$recordColumn.change().selectpicker('refresh');--%>

        <%--$.ajax({--%>
            <%--type: "post",--%>
            <%--url: "${ctx}/biz/ehRecord/sgroupSelect",--%>
            <%--dataType: "json",--%>
            <%--success: function (data) {--%>
                <%--$.each(data, function (indexColumn, item) {--%>
                    <%--$("<option value='" + item.id + "'>" + item.name + "</option>").appendTo("#sgroupId");--%>
                <%--});--%>
                <%--$sgroupId.change().selectpicker('refresh');--%>
            <%--}--%>
        <%--});--%>
        <%--$sgroupId.attr("disabled", false);--%>
    <%--}--%>

//    $(function () {
//        if (officeId != null && officeId != "") {
//            if(singleStation=='yes'){
//                initSgroup();
//            }
//            $btnSubmit.attr("disabled", true);//查询按钮不可用
//        }
//    });
</script>
<script type="text/javascript" src="${ctxStatic}/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${ctxStatic}/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $('.timeb1').datetimepicker({
        autoclose:true,
        format: "yyyy-mm-dd hh:ii",
        language:  'zh-CN',
        startView: 3,
        minView: 0,
        maxView: 4,
        forceParse: 0,
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    });
    $('.timee1').datetimepicker({
        disabled:true,
        autoclose:true,
        format: "yyyy-mm-dd hh:ii",
        language:  'zh-CN',
        startView: 3,
        minView: 0,
        maxView: 4,
        forceParse: 0,
        linkFormat: "yyyy-mm-dd hh:ii:ss"
    });
</script>
</body>
</html>